<template>
    <van-cell title="更多查询与设置方式查看此处" is-link @click="showPopup()"/>
  <van-cell title="选择查询签到的日期" :value="date" @click="show = true"/>
  <van-calendar v-model:show="show" :min-date="new Date(2000, 0, 1)" :max-date="new Date()" @confirm="onConfirm" />
    <van-popup
            v-model:show="showProp"
            position="bottom"
            :style="{ height: '20%'}"
    >
        <van-cell-group style="flex: 1;">
            <van-cell class="rangeTotal" icon="notes-o" title="个人统计" size="large" is-link to="/searchSign/total"/>
            <van-cell class="geRenSheZhi" icon="setting-o" title="个人设置" size="large" is-link to="/searchSign/setting"/>
            <div class="centered-content" @click="cancelPopup()">取消</div>
        </van-cell-group>
    </van-popup>

    <van-steps direction="vertical" :active="activePro">
        <van-step v-for="(step, index) in signStation" :key="index">
            <h3>{{ step.content }}</h3>
            <p>{{ step.time }}</p>
            <p v-if="step.lateSign === 1" style="color: red;">迟到</p>
            <p v-if="step.earlySign === 1" style="color: red;">早退</p>
<!--            <p>{{index}}</p>-->
        </van-step>
    </van-steps>
</template>

<script setup>
import {inject, onMounted, reactive, ref} from 'vue';
import {useRouter} from "vue-router";
import myAxios from "../../plugins/myAxios.ts";
import {showToast} from "vant";

const router = useRouter();
const date = ref('');
const show = ref(false);
const days = ['星期日','星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const today = new Date();
const signInInformation = ref('');
const signOutInformation = ref('');
const signStation = ref('');
const flag = ref('0');
const showProp = ref(false);
const activePro = ref(0);
onMounted(async () => {
  date.value = "当前 " + formatDate(today) + " " + days[today.getDay()];
  signStation.value = await getSignStation();
  // console.log(signStation.value)
})
const formatDate = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${date.getDate()}`;
const onConfirm = async (value) => {
  show.value = false;
  const dateTemp = new Date(formatDate(value));
  const dayOfWeek = days[dateTemp.getDay()];
  date.value = "当前 " + formatDate(value) + " " + dayOfWeek;
  await getSignStation();
};
const getSignStation = async () =>{
  const dateFormat = date.value.split(" ");
  const userListData = await myAxios.get('/userSignState/getSignStateByDate',{
    params:{
      queryDate:dateFormat[1],
    },
  });
  console.log(userListData)
  const today = new Date(); // 获取当前日期
  const currentDate = `${today.getHours()}:${String(today.getMinutes()).padStart(2, '0')}:${String(today.getSeconds()).padStart(2, '0')}`;
  let count = -1;
  userListData.data.data.forEach(item => {
      // 获取当前项的时间字段（假设时间字段为 item.time）
      const itemTime = item.time;
      console.log(currentDate);
      // 比较当前项的时间字段与当前时间字段
      if (currentDate > itemTime) {
          // 如果当前项的时间大于当前时间，则计数器加一
          count++;
      }
  });
    activePro.value = count;
  return userListData.data.data;
}

const showPopup = () => {
    showProp.value = true;
}
const cancelPopup = () =>{
    showProp.value = false;
}
</script>

<style scoped>
.sign-result {
  margin: 10px;
}

.sign-in, .sign-out {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 30px;
  width: 70%;
}

.title {
  font-weight: bold;
  margin-bottom: 5px;
}

.sign-status {
  color: red;
}

.centered-content {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
}
</style>